<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>场景图片展示与选择</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        /* 整体页面的基本样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        /* 页面头部样式 */
        header {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
        }

        /* 图片容器的样式，采用弹性盒子布局来排列图片 */
      .image-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            padding: 20px;
        }

        /* 单个图片展示的样式 */
      .image-item {
            width: 300px;
            margin: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            overflow: hidden;
            position: relative;
        }

        /* 图片样式 */
      .image-item img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 5px;
            transition: transform 0.3s ease;
        }

      .image-item img:hover {
            transform: scale(1.1);
        }

        /* 图片详情遮罩层样式，用于在鼠标悬停时显示详情 */
      .image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

      .image-item:hover.image-overlay {
            opacity: 1;
        }

      .image-overlay h3 {
            margin: 0;
            font-size: 1.5em;
            margin-bottom: 10px;
        }

      .image-overlay p {
            margin: 0;
            font-size: 1em;
            text-align: center;
            padding: 0 10px;
        }

        /* 筛选按钮容器样式 */
      .filter-buttons {
            text-align: center;
            margin: 20px;
        }

      .filter-buttons button {
            background-color: #333;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            margin: 0 10px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

      .filter-buttons button:hover {
            background-color: #555;
        }

        /* 搜索框样式 */
      .search-box {
            text-align: center;
            margin: 20px;
        }

      .search-box input {
            padding: 10px;
            width: 300px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 1em;
        }

    </style>
</head>

<body>
    <header>
        <h1>场景图片展示与选择</h1>
    </header>
    <!-- 搜索框容器 -->
    <div class="search-box">
        <input type="text" id="search-input" placeholder="输入关键词搜索图片">
    </div>
    <!-- 筛选按钮容器 -->
    <div class="filter-buttons">
        <button data-filter="all">全部</button>
        <button data-filter="nature">自然景观</button>
        <button data-filter="city">城市风光</button>
        <button data-filter="architecture">建筑景观</button>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js"></script>
    <script>
        // 获取所有的图片元素、筛选按钮元素以及搜索框元素
        const images = document.querySelectorAll('.image-item img');
        const filterButtons = document.querySelectorAll('.filter-buttons button');
        const searchInput = document.getElementById('search-input');

        // 图片懒加载初始化（使用lazysizes库）
        window.lazySizes.init();

        // 为筛选按钮添加点击事件监听器
        filterButtons.forEach(button => {
            button.addEventListener('click', function () {
                const filterValue = this.dataset.filter;
                // 移除所有图片的显示状态
                images.forEach(image => {
                    image.parentNode.style.display = 'none';
                });
                // 如果是全部按钮被点击，则显示所有图片
                if (filterValue === 'all') {
                    images.forEach(image => {
                        image.parentNode.style.display = 'block';
                    });
                } else {
                    // 根据筛选类别显示相应图片
                    images.forEach(image => {
                        const category = image.parentNode.dataset.category;
                        if (category === filterValue) {
                            image.parentNode.style.display = 'block';
                        }
                    });
                }
            });
        });

        // 为搜索框添加输入事件监听器
        searchInput.addEventListener('input', function () {
            const keyword = this.value.toLowerCase().trim();
            // 先隐藏所有图片
            images.forEach(image => {
                image.parentNode.style.display = 'none';
            });
            if (keyword === '') {
                // 如果关键词为空，显示所有图片（相当于还原初始状态）
                images.forEach(image => {
                    image.parentNode.style.display = 'block';
                });
            } else {
                // 遍历图片，检查图片相关信息是否包含关键词，包含则显示该图片
                images.forEach(image => {
                    const altText = image.alt.toLowerCase();
                    const overlayText = image.parentNode.querySelector('.image-overlay p').textContent.toLowerCase();
                    if (altText.includes(keyword) || overlayText.includes(keyword)) {
                        image.parentNode.style.display = 'block';
                    }
                });
            }
        });

    </script>
    <script>
        // 获取图片容器元素
        const imageContainer = document.getElementById('image-container');
    
        // 定义本地图片所在目录（这里假设图片都放在名为'images'的文件夹下，你可根据实际情况修改）
        const imageDirectory = 'images';
    
        // 创建一个函数用于加载图片并添加到页面
        function loadImages() {
            // 使用XMLHttpRequest对象来获取目录下的文件列表（这里简单示例只获取图片文件，实际可优化判断更多文件类型等情况）
            const xhr = new XMLHttpRequest();
            xhr.open('GET', imageDirectory, true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    const fileList = xhr.responseText.split('\n');
                    fileList.forEach(file => {
                        if (file.trim().toLowerCase().endsWith('.jpg') || file.trim().toLowerCase().endsWith('.png') || file.trim().toLowerCase().endsWith('.jpeg')) {
                            // 创建图片展示的DOM结构
                            const imageItem = document.createElement('div');
                            imageItem.classList.add('image-item');
                            const img = document.createElement('img');
                            img.src = imageDirectory + '/' + file.trim();
                            img.alt = '加载的图片';
                            img.classList.add('lazyload', 'loading');
                            img.setAttribute('data-src', imageDirectory + '/' + file.trim());
                            const imageOverlay = document.createElement('div');
                            imageOverlay.classList.add('image-overlay');
                            const h3 = document.createElement('h3');
                            h3.textContent = '图片标题示例';
                            const p = document.createElement('p');
                            p.textContent = '图片描述示例，可根据实际情况完善';
                            imageOverlay.appendChild(h3);
                            imageOverlay.appendChild(p);
                            imageItem.appendChild(img);
                            imageItem.appendChild(imageOverlay);
                            imageContainer.appendChild(imageItem);
                        }
                    });
                }
            };
            xhr.send();
        }
    
        // 调用函数加载图片
        loadImages();
    </script>
</body>

</html>